<template>
  <view class="iss-tags-mod">
    <view class="tags-container">
      <view v-for="(tag, index) in modelValue" :key="index" class="tag-item">
        <uni-tag :text="tag" type="primary" />
        <uni-icons 
          type="close" 
          size="16" 
          color="#999" 
          class="remove-icon" 
          @click="removeTag(index)"
        />
      </view>
    </view>
    <view class="input-container">
      <uni-easyinput
        v-model="inputValue"
        placeholder="请输入标签"
        :clearable="true"
        @confirm="addTag"
        class="tag-input"
        style="max-width: 150px;"
      />
      <button 
        type="primary" 
        size="mini" 
        class="add-btn" 
        @click="addTag"
        :disabled="!inputValue.trim()"
      >
        添加
      </button>
    </view>
    <text v-if="modelValue.length >= max" class="max-tip">最多只能添加{{max}}个标签</text>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  modelValue: {
    type: Array,
    default: () => []
  },
  max: {
    type: Number,
    default: 5
  }
})

const emit = defineEmits(['update:modelValue'])

const inputValue = ref('')

// 添加标签
const addTag = () => {
  const inputTags = inputValue.value.trim().split(/[，、;；,]/).filter(tag => tag);
  const newTags = [];

  for (const tag of inputTags) {
    if (props.modelValue.length >= props.max) {
      uni.showToast({
        title: `最多只能添加${props.max}个标签`,
        icon: 'none'
      });
      break;
    }

    if (!props.modelValue.includes(tag) && !newTags.includes(tag)) {
      newTags.push(tag);
    }
  }

  if (newTags.length > 0) {
    const updatedTags = [...props.modelValue, ...newTags];
    emit('update:modelValue', updatedTags);
  }

  inputValue.value = '';
}

// 删除标签
const removeTag = (index) => {
  const newTags = [...props.modelValue];
  newTags.splice(index, 1);
  emit('update:modelValue', newTags);
}
</script>

<style lang="scss" scoped>
.iss-tags-mod {
  width: 100%;
  
  .tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
    
    .tag-item {
      display: inline-flex;
      align-items: center;
      background-color: #f0f9ff;
      border-radius: 4px;
      padding: 4px 8px;
      
      .remove-icon {
        margin-left: 4px;
        cursor: pointer;
        
        &:hover {
          color: #f56c6c !important;
        }
      }
    }
  }
  
  .input-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* 确保内容靠左 */
    gap: 20px; /* 设置元素间间隔为20px */
    
    .tag-input {
      max-width: 150px;
      /* 确保输入框内部样式一致 */
      ::v-deep .uni-easyinput__content {
        min-height: 36px;
      }
      ::v-deep .uni-easyinput__content-input {
        height: 36px;
        line-height: 36px;
      }
    }
    
    .add-btn {
      width: 80px;
      height: 36px;
      line-height: 36px;
      margin-left: 0; /* 确保没有额外的左边距 */
    }
  }
  
  .max-tip {
    display: block;
    font-size: 12px;
    color: #f56c6c;
    margin-top: 4px;
  }
}
</style>